<template>
  <div id="app">
      <div>
          name:<input type="text" v-model="value.name">
          id:<input type="text" v-model="value.id">
          <button @click="doAdd">添加</button>
      </div>
      <div v-for="(item,index) of arr" @click="handleClick(id)" :key="index">
      {{item.name}} 
      </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      value:{
        name:"",
        id:""
      },
      arr:[
        {name:"html",id:1001},
        {name:"css",id:1002},
        {name:"js",id:1003},
      ]
    }
  },
  methods:{
    doAdd(){
        var value = this.value;
        
        var obj = Object.assign({},value);
        var res=this.arr.every(item=>{
          return item.id != obj.id&&item.name!=obj.name
          // item.name != obj.name
        })
        if(res){
          this.arr.unshift(obj)
        }
    },
    handleClick(id){
        var lists = this.arr.filter(item=>item.id !=id);
        this.arr = lists
        this.arr.splice(id,1)
    }
    
  }
}
</script>

